<template>
	<input v-if="isEdit" class="input" :value="localValue" @input="onChange" :placeholder="`请输入${field.label}`"
		:type="field.type" :maxlength="field.maxlength ? field.maxlength : 100" placeholder-class="placeholder-style" />
	<view v-else class="value">
		<text v-if="field.pre">{{field.pre}}</text>
		<text>{{ localValue }}</text>
		<text class="value-end" v-if="field.end">{{field.end}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			value: [String, Number],
			default: null,
			field: Object,
			isEdit: Boolean,
		},
		onShow() {
			console.log("value=========", value)
		},

		data() {
			return {
				localValue: this.value // 初始化本地副本
			}
		},

		watch: {
			value(newVal) {
				this.localValue = newVal // 当prop变化时更新本地值
			}
		},

		methods: {
			onChange(e) {
				console.log("e.target.value=========", e.target.value)
				this.$emit('update-value', e.target.value); // 触发事件
			}
		}
	};
</script>

<style scoped>
	.input {
		flex: 2;
		height: 40px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
	}

	.value {
		flex: 2;
		font-size: 14px;
		color: #666666;
	}

	.placeholder-style {
		font-size: 12px;
	}

	.value-end {
		margin-left: 10rpx;
	}
</style>

<style>
	.placeholder-style {
		color: #999999;
		/* 文字颜色 */
		font-size: 12px;
		/* 文字大小 */
		font-weight: normal;
		/* 字体粗细 */
	}
</style>